import React from 'react';
import { useNode } from '@craftjs/core';
import settings from './tabContentWrapperSettings';
import styles from './tabContentWrapper.less';

const defaultMinHeight = 120;

// 容器模块
const TabContentWrapper = ({ minHeight, children }) => {
  const {
    connectors: { connect },
  } = useNode();

  return (
    <div
      ref={connect}
      className={`${styles.tabContentContainer} ${
        children ? null : styles.tabContentContainerPlaceholder
      }`}
      style={{ minHeight: `${minHeight || defaultMinHeight}px` }}
    >
      {children}
    </div>
  );
};

TabContentWrapper.craft = {
  displayName: '标签页-容器',
  props: {
    minHeight: defaultMinHeight,
  },
  custom: { disabled: true },
  related: { settings },
};

export default TabContentWrapper;
